<template>
  <div class="oneMap">
    <CesiumCommon />
    <Teleport to="#app">
      <PhotoViewer360 :viewer360="state.viewer360" />
    </Teleport>
    <StationPopup :stationData="stationData" />
    <LeftCommon :isCollapse="state.isCollapse" />
    <RightCommon :isCollapse="state.isCollapse">
      <div class="mapOperateWarp">
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>主视角</span></template>
          <ul class="collapseWarp" @click="changeClick('主视角')">
            <li>
              <img src="@/assets/images/回到主视角.png" />
            </li>
          </ul>
        </a-tooltip>

        <a-tooltip color="#409fff" placement="right">
          <template #title><span>天气</span></template>
          <ul class="collapseWarp">
            <Weather left="-182px" top="-240px" v-if="state.isWeatherShow" />
            <li @click="state.isWeatherShow = !state.isWeatherShow">
              <img src="@/assets/images/天气.png" />
            </li>
          </ul>
        </a-tooltip>

        <a-tooltip color="#409fff" placement="right">
          <template #title><span>BIM三维实景</span></template>
          <ul class="collapseWarp">
            <BIM3DReality left="-182px" top="-240px" v-if="state.isBimShow" />
            <li @click="state.isBimShow = !state.isBimShow">
              <img src="@/assets/images/bimviz.png" />
            </li>
          </ul>
        </a-tooltip>
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>全屏展示</span></template>
          <ul class="collapseWarp">
            <li v-show="state.isCollapse" @click="state.isCollapse = false">
              <img src="@/assets/images/collapse1.png" />
            </li>
            <li v-show="!state.isCollapse" @click="state.isCollapse = true">
              <img src="@/assets/images/collapse2.png" />
            </li>
          </ul>
        </a-tooltip>
        <a-tooltip color="#409fff" placement="right">
          <template #title><span>图例展示</span></template>
          <Legend :data="legendData" @change-legend-data="changeLegendData" />
        </a-tooltip>
      </div>
    </RightCommon>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, provide, reactive, ref, watch } from 'vue';
  import CesiumCommon from './cesium-common/index.vue';
  import LeftCommon from './left-common/index.vue';
  import RightCommon from './right-common/index.vue';
  import StationPopup from '@/components/StationPopup';
  import BIM3DReality from '@/components/BIM3DReality';
  import Weather from '@/components/weather';
  import PhotoViewer360 from '@/components/PhotoViewer360';
  import { getAllMonitorData } from '@/api/mapServices/mapData';
  import { Legend } from '@/components/Legend';
  import { useStationDataStoreWithOut } from '@/store/modules/stationData';
  import { getPhotoViewer360ID } from './cesium-common/cesium-event/useCesiumEvent';

  import {
    DDIcon,
    DPIcon,
    PKIcon,
    PPIcon,
    SNIcon,
    SSIcon,
    SZIcon,
    VVIcon,
    ZQIcon,
    ZZIcon,
  } from '@/setting/imageEnum';

  defineOptions({ name: 'OneMap' });

  const stationData = ref(null);
  // const stationData = ref({
  //   title: "北斗门涵洞",
  //   stcd: "北斗门涵洞",
  //   stnm: "北斗门涵洞",
  //   sttp: "CZ",
  // });
  const legendUpdate = ref(null);
  const mapStationData = ref(null);
  const stationDataStore = useStationDataStoreWithOut();
  const state = reactive({
    isCollapse: false,
    isShow3DTiles: true,
    type23D: '2D',
    isCollapse: false,
    isBimShow: false,
    isWeatherShow: false,
    viewer360: null,
  });

  const legendData = [
    {
      title: '监测站点',
      data: [
        { icon: DPIcon, name: '泵站', type: 'DP', status: true },
        { icon: DDIcon, name: '涵闸站', type: 'HZ', status: false },
        /*{ icon: CZIcon, name: "渠道站", type: "CZ", status: true },*/
        { icon: PPIcon, name: '雨量站', type: 'PP', status: false },
        // { icon: RRIcon, name: "水库站", type: "RR", status: true },
        { icon: SSIcon, name: '墒情站', type: 'SS', status: false },
        { icon: ZQIcon, name: '水文站', type: 'ZQ', status: false },
        { icon: ZZIcon, name: '水位站', type: 'CZ', status: false },
        { icon: PKIcon, name: '排口', type: 'PK', status: false },
        { icon: SZIcon, name: '水质站', type: 'SZ', status: false },
        { icon: SNIcon, name: '枢纽', type: 'SN', status: false },
        { icon: VVIcon, name: '视频站', type: 'VV', status: false },
      ],
    },
    {
      title: '其他',
      data: [
        { icon: null, name: '沟渠', type: 'channelline', status: true },
        { icon: null, name: '示范区范围', type: 'demonstration_plot', status: true },
        { icon: null, name: '钱仓圩田块', type: 'field_blocks', status: true },
        { icon: null, name: 'L2级干渠', type: 'riverL2', status: true },
        { icon: null, name: '新禹河街道', type: 'streetPolygonLayer', status: false },
      ],
    },
  ];

  // 监听侧边栏表格选择站点，地图点击站点，弹窗展示详情
  watch(
    () => stationDataStore.stationData,
    (val) => {
      console.log(val, 'val');
      stationData.value = {
        ...val,
        title: val.stnm,
      };
    },
  );

  // 图例点击更新的数据
  const changeLegendData = (data) => {
    legendUpdate.value = data;
  };

  const changeClick = (item) => {
    console.log('%c [ data ]-141', 'font-size:13px; background:pink; color:#bf2c9f;', item);
    switch (item) {
      case '主视角':
        {
          fdapi.camera.set(401998.92125, 3562696.605938, 4845.209375, -22.021889, -92.536469, 2);
        }

        break;

      default:
        break;
    }
  };
  provide('LegendUpdateData', legendUpdate);

  onMounted(async () => {
    const allMonitorData = await getAllMonitorData();
    mapStationData.value = allMonitorData;
    state.viewer360 = getPhotoViewer360ID();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .oneMap {
    width: 100%;
    height: 100%;
    position: relative;

    .mapOperateWarp {
      position: absolute;
      left: -60px;
      bottom: 30px;
      z-index: 200;
      width: 50px;
      padding-left: 10px;
      display: grid;
      grid-row-gap: 10px;

      .switch2D3D,
      .collapseWarp,
      .viewer360,
      .inspectionVideo,
      .obliquePhotography {
        width: 40px;
        height: 40px;
        background: rgba(50, 120, 160, 0.6);
        box-shadow: 0px 4px 6px 0px #03225917;
        border-radius: 6px;
        // border: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        /* &:hover, &:active {
          background: #e6fff3;
          border: 1px solid #b9e9d3;
        } */

        img {
          filter: brightness(100%) saturate(100%) invert(0%);
        }

        &:hover,
        &:active {
          background: rgba(50, 120, 160, 1);

          img {
            filter: brightness(125%) saturate(125%) invert(0%);
          }
        }

        li {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 36px;
          }
        }
      }

      .collapseWarp {
        bottom: 200px;

        li img {
          width: 30px;
        }
      }

      .viewer360,
      .inspectionVideo,
      .obliquePhotography {
        img {
          width: 30px;
        }
      }
    }

    .greyIcon {
      filter: grayscale(100%);
    }
  }
</style>
